<template>
    <div>
        <div id="search" class="search-container">
            <!-- 搜索框及筛选组件 -->
            <div id="searchInput">
                <search></search>
            </div>
            <!-- 筛选条件区域 -->
            <div class="filter-bar">
                <!-- 循环每个筛选组 -->
                <div v-for="(item, index) in filterItems" :key="index" class="filter-container">
                    <!-- 左侧固定标签 -->
                    <div class="filter-label">{{ item.label }}：</div>

                    <!-- 右侧选项区域（支持换行） -->
                    <div class="filter-options">
                        <span v-for="(option, optIndex) in item.options" :key="optIndex" class="filter-option"
                            :class="{ 'active': option === item.value }" @click="handleOptionClick(item, option)">
                            {{ option }}
                        </span>
                    </div>
                </div>

                <!-- 清除按钮 -->
                <el-button type="text" class="clear-all-btn" @click="clearAll">
                    清除全部
                </el-button>
                <!-- 使用封装的城市选择组件 -->
                <LocationSelector v-if="showCityModal" :mode="1" :visible.sync="showCityModal"
                    @change="handleCityChange" @confirm="handleCityConfirm" @close="showCityModal = false" />
            </div>
        </div>
        <!-- 内容区域保持不变 -->
        <div id="content" class="content-container" @scroll="handleScroll">
            <!-- 公司卡片网格 -->
            <div class="company-section">
                <el-card v-for="company in companyList" :key="company.positionId" class="company-card"
                    @click.native="selectCompany(company.companyId)">
                    <div class="company-content">
                        <!-- 卡片内容保持不变 -->
                        <div class="company-title-salary">
                            <el-avatar :src="company.avatar" :size="60"></el-avatar>
                            <span class="company-title">{{ company.name }}</span>
                        </div>
                        <div class="company-tags">
                            <span><i class="el-icon-copy-document"></i> {{ company.companyIndustry }}</span>
                            <span v-if="company.workTimeType"><i class="el-icon-time"></i> {{
                                reversedWorkTimeMap[company.workTimeType]
                                }}</span>
                        </div>
                        <div class="company-meta">
                            <span class="company-location"><i class="el-icon-location"></i>{{ company.location }}</span>
                        </div>
                    </div>
                </el-card>
            </div>
            <div v-if="loading" class="loading-tip">加载中...</div>
            <div v-if="!hasMore && !loading" class="loading-tip">没有更多数据啦~</div>
        </div>
    </div>
</template>

<script>
import { getCompanyList, getCompanyIndustry, getHotCity } from '@/util/seeker_api/company_api.js'

import search from '@/components/SearchInput.vue'
import LocationSelector from '@/components/localSelect.vue'  // 引入封装组件

export default {
    components: {
        search,
        LocationSelector,  // 注册组件

    },
    props: {
        address: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            filterItems: [
                {
                    label: '公司地点',
                    options: ['全国', '北京市', '上海市', '广州市', '深圳市', '杭州市', '天津市', '西安市', '苏州市', '武汉市', '长沙市', '成都市', '郑州市', '重庆市', '全部城市'],
                    value: '全国' // 选中值，可根据实际初始化
                },
                {
                    label: '行业类型',
                    options: ['不限'],
                    value: '不限'
                },
                {
                    label: '工作时间',
                    options: ['不限', '单休', '双休', '灵活工作时间'],
                    value: '不限'
                }
            ],
            // 新增：保存城市筛选的初始选项
            initialLocationOptions: ['全国', '北京市', '上海市', '广州市', '深圳市', '杭州市', '天津市', '西安市', '苏州市', '武汉市', '长沙市', '成都市', '郑州市', '重庆市', '全部城市'],
            selectedOptions: {
                companyIndustry: '',
                location: '',
                workTimeType: ''
            },
            loading: false,
            companyList: [],
            showCityModal: false, // 控制城市弹窗显示与隐藏
            workTimeTypeMap: {
                '单休': 'SINGLE_REST',
                '双休': 'DOUBLE_REST',
                '灵活工作时间': 'FLEXIBLE'
            },
            pageNum: 1,
            pageSize: 21,
            totalPages: 0,
            hasMore: true,
        }
    },
    methods: {
        // 获取所有公司行业
        async getCompanyIndustry() {
            try {
                const response = await getCompanyIndustry();
                console.log("获取所有公司行业成功", response.data);

                const newIndustries = response.data.map(item => item.industryName);
                this.filterItems[1].options.push(...newIndustries);
            } catch (error) {
                console.error('获取公司行业失败', error);
            }
        },

        // 获取公司列表（保持不变）
        async fetchData(isLoadMore = false) {
            this.loading = true;

            try {
                const processedOptions = this.processSelectedOptions();
                const params = {
                    ...processedOptions,
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                };
                const res = await getCompanyList(params);
                this.totalPages = res.data.pages;
                if (isLoadMore) {
                    this.companyList = [...this.companyList, ...res.data.respList];
                } else {
                    this.companyList = res.data.respList;
                }
                this.hasMore = this.pageNum < this.totalPages;
            } catch (error) {
                console.error('获取企业列表失败', error);
                this.$message.error('获取数据失败，请重试');
            } finally {
                this.loading = false;
            }
        },

        // 点击筛选选项
        handleOptionClick(item, option) {
            item.value = option;
            if (item.label === '公司地点') {
                if (option === '全部城市') {
                    // 打开弹窗前保存当前选项状态
                    this.selectedOptions.location = '';
                    this.showCityModal = true;
                    return;
                } else {
                    this.selectedOptions.location = option;
                }
            } else if (item.label === '行业类型') {
                this.selectedOptions.companyIndustry = option;
            } else if (item.label === '工作时间') {
                this.selectedOptions.workTimeType = option;
            }
            this.pageNum = 1;

            this.fetchData();
        },

        // 处理城市选择变化
        handleCityChange(selectedCity) {
            if (!selectedCity) return;

            const locationFilter = this.filterItems.find(item => item.label === '公司地点');
            if (locationFilter) {
                // 恢复初始选项，然后添加新选择的城市
                locationFilter.options = [...this.initialLocationOptions];

                // 检查城市是否已存在于初始选项中，不存在则添加
                if (!locationFilter.options.includes(selectedCity)) {
                    // 在"全部城市"前插入新选择的城市
                    locationFilter.options.splice(locationFilter.options.length - 1, 0, selectedCity);
                }

                // 设置选中值
                locationFilter.value = selectedCity;
                this.selectedOptions.location = selectedCity;
            }
        },

        // 处理城市选择确认
        handleCityConfirm(selectedCity) {
            this.handleCityChange(selectedCity);
            this.showCityModal = false;
            this.fetchData();
        },

        // 清除全部筛选条件
        clearAll() {
            this.filterItems.forEach(item => {
                item.value = item.options[0];
                if (item.label === '公司地点') {
                    // 清除时也恢复初始选项
                    item.options = [...this.initialLocationOptions];
                    this.selectedOptions.location = item.options[0];
                } else if (item.label === '行业类型') {
                    this.selectedOptions.companyIndustry = item.options[0];
                } else if (item.label === '工作时间') {
                    this.selectedOptions.workTimeType = item.options[0];
                }
            });
            this.fetchData();
        },

        // 其他方法保持不变
        selectCompany(id) {
            this.$router.push({
                name: 'seekerCompanyDetail',
                query: { id: id }
            })
        },

        processSelectedOptions() {
            const processed = { ...this.selectedOptions };

            if (processed.location === '全国') {
                processed.location = '';
            }

            if (processed.companyIndustry === '不限') {
                processed.companyIndustry = '';
            }

            if (processed.workTimeType) {
                const enumValue = this.workTimeTypeMap[processed.workTimeType];
                if (enumValue) {
                    processed.workTimeType = enumValue;
                } else {
                    delete processed.workTimeType;
                }
            } else {
                delete processed.workTimeType;
            }

            return processed;
        },

        handleScroll(e) {
            const container = e.target;
            if (container.scrollTop + container.clientHeight >= container.scrollHeight - 1) {
                this.loadMore();
            }
        },

        async loadMore() {
            if (this.loading || !this.hasMore) {
                return;
            }
            this.pageNum++;
            await this.fetchData(true);
        },

        // 获取热门城市
        async getHotCity() {
            try {
                const response = await getHotCity();
                console.log("获取热门城市成功", response.data);
                this.filterItems[0].options.push(...response.data);
            } catch (error) {
                console.error('获取热门城市失败', error);
            }
        },

    },

    created() {
        // 初始化时保存城市筛选的初始选项
        this.getCompanyIndustry();
        this.fetchData();
    },

    computed: {
        reversedWorkTimeMap() {
            return Object.fromEntries(
                Object.entries(this.workTimeTypeMap).map(([key, value]) => [value, key])
            );
        }
    }
}
</script>

<style scoped>
/* 筛选栏容器 */
.filter-bar {
    padding: 15px 20px;
    position: relative;
}

/* 每个筛选项容器 - 使用flex布局分离标签和选项 */
.filter-container {
    display: flex;
    margin-bottom: auto;
    /* 筛选项之间的垂直间距 */
    align-items: flex-start;
    /* 顶部对齐 */
}

/* 左侧标签 - 固定宽度居左 */
.filter-label {
    width: 80px;
    /* 固定宽度，确保标签对齐 */
    font-size: 14px;
    color: #333;
    font-weight: 500;
    padding-top: 6px;
    /* 与选项垂直居中对齐 */
    flex-shrink: 0;
    /* 不缩小 */
}

/* 右侧选项容器 - 占据剩余宽度，支持换行 */
.filter-options {
    flex-grow: 1;
    /* 占据剩余空间 */
    display: flex;
    flex-wrap: wrap;
    /* 自动换行 */
    gap: 8px;
    /* 选项之间的间距 */
    margin-top: 3px;
}

/* 选项样式 */
.filter-option {
    font-size: 14px;
    padding: 3px 5px;
    color: #666;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    white-space: nowrap;
    /* 选项文字不换行 */
}

/* 选中状态 */
.filter-option.active {
    background-color: #e8f4ff;
    color: #009688;
    font-weight: 500;
}

/* 悬停效果 */
.filter-option:hover:not(.active) {
    color: #009688;
    background-color: #f5f5f5;
}

/* 清除按钮 - 固定在右上角 */
.clear-all-btn {
    position: absolute;
    right: 20px;
    top: 15px;
    color: #999;
    font-size: 14px;
}

.clear-all-btn:hover {
    color: #1890ff;
}


#content {
    width: 90%;
    max-width: 1200px;
    margin: 20px auto;
    background: transparent;
    border-radius: 8px;
    /* 关键1：固定高度，确保内容能超出容器 */
    height: calc(100vh - 200px);
    /* 例如：视口高度减去200px（根据页面布局调整） */
    padding: 20px;
    /* 关键2：超出内容显示滚动条 */
    overflow-y: auto;
    /* 关键3：避免padding影响高度计算 */
    box-sizing: border-box;
    /* 可选：隐藏滚动条但保留滚动功能（美观用） */
    scrollbar-width: none;
    /* &::-webkit-scrollbar { display: none; } */
}

.company-section {
    /* 使用Flex布局 */
    display: flex;
    /* 允许换行 */
    flex-wrap: wrap;
    /* 卡片之间的间距（水平和垂直方向） */
    gap: 25px;
    /* 可选：容器内部左右留出边距，避免边缘卡片贴边 */
    padding: 0;
    /* 可选：清除容器默认间距 */
    margin: 0;
}

/* 岗位卡片：控制宽度，确保一行3个 */
.company-card {
    /* 核心：宽度 = 1/3 - 间隔（gap）的分摊值 */
    /* 因为gap会占用总宽度，所以需要减去部分宽度避免换行 */
    width: 280px;
    /* 3个卡片 + 2个gap（共20*2=40px），每个卡片分摊40px/3≈13.33px */
    /* 取消卡片默认边框（可选，根据需求保留） */
    border: none;
    /* 可选：添加卡片阴影，增强立体感 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    /* 可选：卡片内部padding，让内容不贴边 */
    padding: 15px;
    /* 避免卡片被压缩 */
    flex-shrink: 0;
}

.company-title-salary {
    display: flex;
    flex-direction: column;
    /* 纵向排列 */
    align-items: center;
    /* 水平居中 */
    padding: 10px 0;
    /* 上下内边距，优化间距 */
}

.company-title {
    margin-top: 8px;
    /* 与头像保持距离 */
    font-size: 16px;
    font-weight: 500;
}
</style>